﻿/// <reference path="backbone.localstorage.js" />
/// <reference path="jquery.js" />
/// <reference path="underscore.js" />
/// <reference path="backbone.js" />
/// <reference path="json2.js" />

$(function () {

    //todo模型 预定义done属性 和toggle函数
    window.Todo = Backbone.Model.extend({
        //默认属性
        defaults: { done: false },

        //改变done属性
        toggle: function () {
            this.save({
                done: !this.get("done")//此处的this 依然为todo对象 可见下面的测试1.1.1 方法调用模式 this指向本身对象  此处的{done: !this.get("done") 是get函数的参数   并没有到函数调用模式
            });
        }
    })

    window.TodoList = Backbone.Collection.extend({
        model: Todo,
        localStorage: new Store("todos"),

        //过滤掉done为false的todo
        done: function () {
            return this.filter(function (todo) {
                return todo.get("done");
            });
        },
        //过滤掉还没有完成todo的数据模型
        remaining: function () {
            return this.without.apply(this, this.done());//js是函数式编程 所以函数也可以用方法  apply方法让我们构建一个参数数组来调用函数 并允许我们选择this的值 apply方法第一个参数是将被绑定给this的值 第二个就是参数数组
        }
    })

    window.TodoView = Backbone.View.extend({
        //视图是个li标签
        tagName: "li",
        //模板
        template: $("#item-template").template(),
        //定义事件
        events: {
            "change   .check": "toggleDone",
            "dblclick .todo-content": "edit",
            "click    .todo-destroy": "destroy",
            "keypress .todo-input": "updateOnEnter",
            "blur     .todo-input": "close"
        },
        //
        initialize: function () {

            //确保在正确的作用域 调用函数
            _.bindAll(this, 'render', 'close', 'remove', 'edit');

            //监听模型的修改
            this.model.bind('change', this.render);
            this.model.bind('destroy', this.remove);//当模型销毁时也删除元素
        },

        render: function () {
            //根据模板来更新el  （模板写在页面中）
            var element = jQuery.tmpl(this.template, this.model.toJSON());
            $(this.el).html(element);
            this.input = this.$(".todo-input");
            return this;
        },
        //当复选框选中时 把模型改成选中状态
        toggleDone: function () {
            this.model.toggle();
        },
        //把当前视图视图切换为编辑模式 显示input输入框
        edit: function () {
            $(this.el).addClass("editing");
            this.input.focus();
        },
        //关闭编辑模式
        close: function (e) {
            this.model.save({ content: this.input.val() });
            $(this.el).removeClass("editing");
        },
        //如果按下回车键，则结束编辑状态 且触发input的blur事件
        updateOnEnter: function (e) {
            if (e.keyCode == 13) e.target.blur();
        },
        //当模型被销毁时也删除元素
        remove: function () {
            $(this.el).remove();
        },
        //模型销毁
        destroy: function () {
            this.model.destroy();
        }
    })


    window.Todos = new TodoList;

    // Our overall **AppView** is the top-level piece of UI.
    window.AppView = Backbone.View.extend({

        //现有的html元素
        el: $("#todoapp"),

        statsTemplate: $("#stats-template").template(),

        events: {
            "keypress #new-todo": "createOnEnter",
            "click .todo-clear a": "clearCompleted"
        },

        //初始化时我们将相关事件绑定给todos集合
        initialize: function () {
            _.bindAll(this, 'addOne', 'addAll', 'render');
            this.input = this.$("#new-todo");

            Todos.bind('add', this.addOne);
            Todos.bind('refresh', this.addAll);
            Todos.bind('all', this.render);

            Todos.fetch();
        },

        //视图重绘
        render: function () {
            var done = Todos.done().length;
            var element = jQuery.tmpl(this.statsTemplate, {
                total: Todos.length,
                done: Todos.done().length,
                remaining: Todos.remaining().length
            });

            this.$('#todo-stats').html(element);
        },

        //添加一个单独的todo项
        addOne: function (todo) {
            var view = new TodoView({ model: todo });
            this.$("#todo-list").append(view.render().el);
        },

        //一次将所有项都添加到todos
        addAll: function () {
            Todos.each(this.addOne);
        },

        //如果在主框中敲回车那么添加一个新todo
        createOnEnter: function (e) {
            if (e.keyCode != 13) return;

            var value = this.input.val();
            if (!value) return;

            Todos.create({ content: value });
            this.input.val('');
        },

        clearCompleted: function () {
            _.each(Todos.done(), function (todo) { todo.destroy(); });
            return false;
        }
    });

    //最后创建一个app
    window.App = new AppView;

})







//    1.1.1
//    var fish = {
//    name: "yu",
//    get: function () {
//        return this.name;
//    },
//    ale: function (val) {
//        alert(val);
//    },
//    remove: function () {
//        this.ale(this.get());
//    }
//}
